<template>
  <div>
    <the-header-top></the-header-top>
    <logo-bar></logo-bar>

    <div class="repay-container">
      <div class="repay-content">
        <v-title>{{$t('message.PersonalBillRepay')}}</v-title>

        <div class="repay-method">
          <div class="repay-label-method repay-left">
            <!--选择还款方式：-->
            {{$t('message.PersonalBillRepayChoosePayType')}}：
          </div>
          <div class="repay-choose-group">
            <div class="repay-choose repay-margin-left" :class="{ 'repay-choose-check': method === 0}" @click="changeMethod(0)">
              <!--还清单期账单-->
              {{$t('message.PersonalBillRepayReturnBillNow')}}
            </div>
            <div class="repay-choose repay-margin-left" :class="{ 'repay-choose-check': method === 1}" @click="changeMethod(1)">
              {{$t('message.PersonalBillRepayReturnBillRest1')}}{{ repayInfo.surplus }}{{$t('message.PersonalBillRepayReturnBillRest2')}}
            </div>
          </div>
        </div>
        <!--下拉选择还款期数开始-->
        <div class="repay-row select-wrap" v-if="isShowSelect">
          <div class="repay-label-method repay-left">
            <!--选择还款期数：-->
            {{ $t('message.PersonalBillRepayPeriods') }}：
          </div>
          <div class="repay-label repay-pay repay-margin-left">
            <v-select :selections="repaySteps" @on-change="chooseStep" width="60px"></v-select>
          </div>
        </div>
        <!--下拉选择还款期数开始-->
        <div class="repay-row">
          <div class="repay-label repay-left">
            {{$t('message.PersonalBillRepayMoneyNeedPay')}}：
          </div>
          <div class="repay-label repay-pay repay-margin-left">
            {{ $t('message.currencySymbol') }}{{ repayInfo.price }}
          </div>
          <div class="repay-label repay-demurrage" v-if="repayInfo.late_fee !== 0">
            ({{$t('message.PersonalBillRepayContain')}}{{ $t('message.currencySymbol') }}{{ repayInfo.late_fee }}{{$t('message.PersonalBillRepayTimeFee')}})
          </div>
        </div>
        <div class="repay-row">
          <div class="repay-label repay-left">
            {{$t('message.PersonalBillRepayOrderInfo')}}：
          </div>
          <div class="repay-label repay-margin-left">
            {{ repayInfo.name }}
          </div>
        </div>
        <div class="repay-row">
          <div class="repay-label repay-left">
            {{$t('message.PersonalBillRepayStagingNumber')}}：
          </div>
          <!--<div class="repay-label repay-margin-left">-->
            <!--{{ repayInfo.stages_end }}/{{ repayInfo.stages }}{{$t('message.PersonalBillRepayPeriod')}}-->
          <!--</div>-->
          <div class="repay-label repay-margin-left">
            {{ repayInfo.stages_one }}/{{ repayInfo.stages }}-{{ repayInfo.stages_end }}/{{ repayInfo.stages }}{{$t('message.PersonalBillRepayPeriod')}}
          </div>
        </div>
        <div class="repay-btn">
          <button type="button" @click="toPay">{{$t('message.PersonalBillRepayReturnNow')}}</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TheHeaderTop from '@/components/base/TheHeaderTop'
import LogoBar from '@/components/base/LogoBar'
import VTitle from '@/components/base/VTitle'
import VSelect from '@/components/base/VSelect'
import { setCookie } from '@/util/util'

export default {
  name: 'PersonalBillRepay',
  components: {
    TheHeaderTop,
    LogoBar,
    VTitle,
    VSelect
  },
  data () {
    return {
      isShowSelect: true,
      method: 0,
      repayInfo: {},
      repayType: '',
      repayNum: {}
    }
  },
  computed: {
    orderId () {
      return this.$route.query.orderId
    },
    repaySteps () {
      let a = []
      let stagesCount = this.repayNum.stages
      for (let i = this.repayNum.stages_one; i <= stagesCount; i++) {
        a.push({
          name: i + '/' + stagesCount,
          value: i
        })
      }
      return a
    }
  },
  methods: {
    chooseStep (val) {
      this.changeMethod(0, val.value)
    },
    changeMethod (index, num) {
      this.method = index
      // 还清剩余账单
      if (this.method === 1) {
        this.isShowSelect = false
        this.$ajax.repaySurplus({
          order_id: this.orderId
        }).then((res) => {
          if (res.code === 200) {
            this.repayInfo = res.data
          } else if (res.code === 202) {
            console.log('请求数据为空')
          } else if (res.code === 301) {
            this.$router.push({path: '/login', query: {redirect: this.$route.fullPath}})
          }
        })
      // 还清单期账单
      } else if (this.method === 0) {
        this.isShowSelect = true
        this.$ajax.repay({
          order_id: this.orderId,
          number: num
        }).then((res) => {
          if (res.code === 200) {
            this.repayInfo = res.data
          } else if (res.code === 202) {
            console.log('请求数据为空')
          } else if (res.code === 301) {
            this.$router.push({path: '/login', query: {redirect: this.$route.fullPath}})
          }
        })
      }
    },
//    第一次加载此页面时，执行此函数，主要是解决下拉菜单的数据不被重新刷新
    rePayEach () {
      this.$ajax.repay({
        order_id: this.orderId
      }).then((res) => {
        if (res.code === 200) {
          this.repayInfo = res.data
          this.repayNum = res.data
          this.repayType = 'now'
        } else if (res.code === 202) {
          console.log('请求数据为空')
        } else if (res.code === 301) {
          this.$router.push({path: '/login', query: {redirect: this.$route.fullPath}})
        }
      })
    },
    toPay () {
      // 存储支付结果信息
      let obj = JSON.stringify({ goodsPrice: this.repayInfo.price, orderId: this.orderId, orderNumber: this.repayInfo.order_num_md5, startNumber: this.repayInfo.stages_one, endNumber: this.repayInfo.stages_end, stages: this.repayInfo.stages, orderInfo: this.repayInfo.name, type: 'bill' })
//      sessionStorage.setItem('payResult', obj)
      setCookie('payResult', obj)

      // 跳转到支付页面
      this.$router.push({ path: '/pay', query: { type: 2 } })
    }
  },
  created () {
//    this.changeMethod(0, 0)
    this.rePayEach()
  }
}
</script>

<style scoped>
.repay-container {
  min-width: 1200px;
  background-color: #f5f5f5;
  padding: 40px 0;
}

.repay-content {
  width: 1120px;
  margin: 0 auto;
  padding: 40px 40px 86px;
  background-color: #fff;
}

.repay-method {
  height: 44px;
  margin: 49px 0 29px;
  /*overflow: hidden;*/
}

.repay-label-method {
  float: left;
  width: 98px;
  height: 44px;
  /*line-height: 44px;*/
}

.repay-left {
  width: 145px;
  /*width: 215px;*/
  text-align: right;
}

.repay-choose-group {
  float: left;
  height: 44px;
}

.repay-choose {
  float: left;
  height: 42px;
  line-height: 42px;
  padding: 0 15px;
  border: 1px solid #e6e6e6;
  border-radius: 2px;
  cursor: pointer;
}

.repay-margin-left {
  margin-left: 16px;
}

.repay-choose-check {
  border: 1px solid #ff600a;
  background: url(../../../assets/images/icon_check.png) no-repeat top right;
}

.repay-row {
  height: 20px;
  margin-bottom: 40px;
}

.select-wrap {
  height: 44px;
}

.repay-label {
  float: left;
  font-size: 14px;
  color: #666;
}

.repay-pay {
  font-size: 16px;
  color: #ff600a;
}

.repay-demurrage {
  height: 17px;
  line-height: 17px;
  font-size: 12px;
  color: #e74c3c;
  margin: 3px 0 0 8px;
}

.repay-btn {
  width: 120px;
  height: 40px;
  margin-left: 114px;
}

.repay-btn button {
  width: 120px;
  height: 40px;
  border: none;
  background-color: #ff600a;
  color: #fff;
  cursor: pointer;
}

.repay-btn button:hover {
  background-color: #ff3c00;
}

.repay-btn button:active {
  background-color: #e83700;
}
</style>
